<template>
    <div class="login-page">
        <el-card class="login-page-card">
            <template #header>
                <div>ikun不食油饼管理系统</div>
            </template>
            <el-form 
            ref="ruleFormRef" :model="formInstance" :rules="validationRules" class="login-page-form" 
            status-icon>
                
            <el-form-item label="帐号:" prop="userName">
                <el-input v-model="formInstance.userName" />
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input
                type="password" v-model="formInstance.password" />
            </el-form-item>
            <el-form-item class="form-btns">
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script>
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            formInstance: {
                userName: "",
                password: ""
            },
            validationRules: {
                userName: [
                    { required: true, message: '请输入帐号', trigger: 'blur' },
                    { min: 3, max: 6, message: '请输入3到6位的帐号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 16, message: '请输入密码', trigger: 'blur' },
                ],
            }
        }
    },
    methods:{
        ...mapActions({
            userInfoActions:"userInfoActions",
        }),
        submitForm(){
            this.$refs.ruleFormRef.validate(async(valid,fields)=>{
                if(valid){
                    const params={
                        adminname:this.formInstance.userName,
                        password:this.formInstance.password,
                    };
                    const res = await this.userInfoActions(params);
                    res&&this.$router.push("/system");
                }else{
                    console.log(fields);
                    this.$message.error("登录失败");
                }
            });
        },
        resetForm(){
            this.$refs.ruleFormRef.resetFields();
        }
    }
}

</script>

<style lang="scss" scoped>
.login-page{
    height: 100%;
    width: 100%;
    position: relative;
    background: url(../../assets/bg3.webp) center center;
    background-size: cover;
    &-card{
        width: 400px;
        height: 300px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        ::v-deep .el-card__header{
            text-align: center;
            font-size: 20px;
            color: red;
        }
        ::v-deep .el-card__body{
            padding-top: 40px;
            .login-page-form{
                .form-btns{
                    .el-form-item__content{
                        justify-content: center;
                    }
                }
            }
        }
        
    }
}
</style>
  